<template>
  <div>
    <div class="flex justify-center" style="margin: auto">
      <div class="s-card">
        <div style="padding: 16px">
          <p class="s-card-title">
            {{ $t('developer.detail.my_applications') }}
          </p>
          <div class="flex justify-between">
            <div class="s-card-label">{{ myApplications }}</div>
          </div>
        </div>
      </div>
      <div class="s-card">
        <div style="padding: 16px">
          <p class="s-card-title">
            {{ $t('developer.detail.released_applications') }}
          </p>
          <div class="flex justify-between">
            <div class="s-card-label">{{ releasedApplications }}</div>
          </div>
        </div>
      </div>
      <div class="s-card">
        <div style="padding: 16px">
          <p class="s-card-title">
            {{ $t('developer.detail.progress_applications') }}
          </p>
          <div class="flex justify-between">
            <div class="s-card-label">{{ progressApplications }}</div>
          </div>
        </div>
      </div>
    </div>
    <el-row style="margin: 8px 20px">
      <div class="my-card">
        <div class="my-card-header">
          <div class="flex items-center justify-between">
            <span>
              <span class="my-card-title">{{
                $t('developer.detail.installation_trend_7')
              }}</span>
            </span>
          </div>
        </div>
        <!-- card-body -->
        <installtrend-chart />
      </div>
    </el-row>
    <el-row style="margin: 8px 20px">
      <div class="my-card">
        <div class="my-card-header">
          <div class="flex items-center justify-between">
            <div class="my-card-title">
              {{ $t('developer.detail.install_statistics') }}
            </div>

            <el-form
              @submit.prevent.native
              class="search-box"
              inline
              size="small"
            >
              <el-form-item>
                <el-input
                  v-model="appNameForStatistics"
                  :maxlength="32"
                  show-word-limit
                  @blur="
                    () => (appNameForStatistics = appNameForStatistics.trim())
                  "
                  prefix-icon="el-icon-search"
                  :placeholder="$t('developer_app.app_name')"
                  style="width: 250px"
                  size="small"
                  clearable
                  @keyup.enter.native="
                    searchAppStatisticsData((pageIndexForStatistics = 1))
                  "
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  class="p-2"
                  size="medium"
                  :loading="loading"
                  @click="searchAppStatisticsData((pageIndexForStatistics = 1))"
                >
                  <i class="el-icon-search" />
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <el-card
          shadow="never"
          :body-style="{ padding: '0px' }"
          @current-change="currentChangeHandleForStatistics"
          :page-size="pageSizeForStatistics"
          :total="totalPageForStatistics"
          :current-page="pageIndexForStatistics"
        >
          <el-table
            :v-loading="loading"
            :show-overflow-tooltip="true"
            :data="appStatisticsData"
          >
            <el-table-column
              :label="$t('developer_app.app_name')"
              prop="appName"
              align="center"
            />
            <el-table-column
              :label="$t('developer.detail.device_installed')"
              prop="installCount"
              align="center"
            />
          </el-table>
        </el-card>
      </div>
    </el-row>
  </div>
</template>

<script>
import {
  getMyApplicationCount,
  getProgressApplicationCount,
  getReleasedApplicationCount,
  getAppStatisticsList
} from '@/api/developer'

import InstalltrendChart from './install-trend-chart.vue'

export default {
  components: {
    InstalltrendChart
  },
  data() {
    return {
      loading: false,
      developer: null,
      myApplications: 0,
      releasedApplications: 0,
      progressApplications: 0,
      pageIndexForStatistics: 1,
      pageSizeForStatistics: 10,
      totalPageForStatistics: 0,
      appNameForStatistics: '',
      appStatisticsData: []
    }
  },
  mounted() {
    this.developer = JSON.parse(localStorage.getItem('developer-info'))
    this.getMyApplications()
    this.getReleasedApplications()
    this.getProgressApplications()
    this.searchAppStatisticsData()
  },
  methods: {
    getMyApplications() {
      getMyApplicationCount(this.developer.developerId)
        .then((res) => {
          if (res) {
            this.myApplications = res
          }
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    getReleasedApplications() {
      getReleasedApplicationCount(this.developer.developerId)
        .then((res) => {
          if (res) {
            this.releasedApplications = res
          }
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    getProgressApplications() {
      getProgressApplicationCount(this.developer.developerId)
        .then((res) => {
          if (res) {
            this.progressApplications = res
          }
        })
        .catch((err) => {
          this.$confirmError(err)
        })
    },
    sizeChangeHandle(val) {
      this.pageSize = val
      this.searchAppDeviceData()
    },
    currentChangeHandle(val) {
      this.pageIndex = val
      this.searchAppDeviceData()
    },
    sizeChangeHandleForStatistics(val) {
      this.pageSizeForStatistics = val
      this.searchAppStatisticsData()
    },
    currentChangeHandleForStatistics(val) {
      this.pageIndexForStatistics = val
      this.searchAppStatisticsData()
    },
    searchAppStatisticsData() {
      this.loading = true
      getAppStatisticsList(this.developer.developerId, {
        pageNo: this.pageIndexForStatistics,
        pageSize: this.pageSizeForStatistics,
        appName: this.appNameForStatistics
      })
        .then((res) => {
          this.loading = false
          if (res) {
            this.appStatisticsData = res.data
            this.totalPageForStatistics = res.rows
          }
        })
        .catch((err) => {
          this.loading = false
          this.$confirmError(err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.my-card {
  background: #ffffff;
  border: 1px solid #eef0f7;
  box-shadow: 0px 0px 21px 0px rgba(19, 33, 68, 0.08);
  border-radius: 12px;
  margin-bottom: 16px;
  .my-card-header {
    padding: 32px 24px;
    border-bottom: solid 1px #eef0f7;
    ::v-deep .el-form-item {
      margin-bottom: 0px;
    }
    .my-card-title {
      color: #1e2022;
      font-size: 16px;
      font-weight: 600;
    }
  }

  .my-card-body {
    padding: 36px;
    padding-top: 0px;
  }
}
.s-card {
  width: 381px;
  background: #ffffff;
  border: 1px solid #eef0f7;
  box-shadow: 0px 0px 21px 0px rgba(19, 33, 68, 0.08);
  border-radius: 12px;
  margin: 16px;
  .s-card-title {
    font-size: 14px;

    font-weight: 600;
    color: #93a0aa;
    line-height: 26px;
  }
  .s-card-label {
    font-size: 24px;
    line-height: 40px;
    font-weight: 600;
    color: #1e2022;
  }
}
</style>
